<template>
  <div class="cc_box">
    <div class="cc_update"><el-button type="primary" class="cc_btn1" @click="showF()">添加考试</el-button></div>
    <div class="table">
       <el-table
          :data="tableData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="T_id"
            label="考试编号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="course_name"
            label="课程名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="teacher_name"
            label="指导老师"
            width="120">
          </el-table-column>
          <el-table-column
            prop="finsh_time"
            label="完成时间"
            width="150">
          </el-table-column>
          <el-table-column
            prop="time"
            label="考试时长"
            width="120">
          </el-table-column>
          <el-table-column
            prop="n_person"
            label="当前考试人数"
            width="120">
             <el-button
                type="text"
                size="small"
                @click="showPerson()">
                查看详细
             </el-button>
          </el-table-column>
          <el-table-column
            prop="f_person"
            label="已完成人数"
            width="120">
                <el-button
                type="text"
                size="small"
                @click="showFinsh()">
                查看详细
             </el-button>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
              <el-button
                type="text"
                size="small"
                @click="showTest()">
                添加题目
              </el-button>
          </el-table-column>
         </el-table>
         </div>
    <div class="cc_form" v-if="showForm">
        <el-form ref="form" :model="form" label-width="80px">
           <el-form-item label="考试编号">
             <el-input v-model="form.T_id"></el-input>
           </el-form-item>
           <el-form-item label="课程名">
             <el-input v-model="form.course_name"></el-input>
           </el-form-item>
           <el-form-item label="指导老师">
             <el-input v-model="form.teacher"></el-input>
           </el-form-item>
           <el-form-item label="完成时间">
             <el-input v-model="form.finsh_name"></el-input>
           </el-form-item>
           <el-form-item label="考试时长">
             <el-input v-model="form.time"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="cancelF()">取消</el-button>
           </el-form-item>
        </el-form>
    </div>
    <div class="cc_form2" v-if="showTC">
      <div class="buttons">
        <el-button  @click="showone()">单选题</el-button>
        <el-button  @click="showtwo()">多选题</el-button>
        <el-button  @click="showthree()">填空题</el-button>
        <el-button  @click="showfour()">简答题</el-button>
      </div>
      <div class="questions" v-if="one">
        <el-form ref="form" :model="OneForm" label-width="80px">
           <el-form-item label="单选题目">
             <el-input v-model="OneForm.o_name"></el-input>
           </el-form-item>
           <el-form-item label="A选项">
             <el-input v-model="OneForm.A"></el-input>
           </el-form-item>
           <el-form-item label="B选项">
             <el-input v-model="OneForm.B"></el-input>
           </el-form-item>
           <el-form-item label="C选项">
             <el-input v-model="OneForm.C"></el-input>
           </el-form-item>
           <el-form-item label="D选项">
             <el-input v-model="OneForm.D"></el-input>
           </el-form-item>
           <el-form-item label="分数">
             <el-input v-model="OneForm.score"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_TC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
      <div class="questions" v-if="two">
        <el-form ref="form" :model="TwoForm" label-width="80px">
           <el-form-item label="多选题目">
             <el-input v-model="TwoForm.t_name"></el-input>
           </el-form-item>
           <el-form-item label="A选项">
             <el-input v-model="TwoForm.A"></el-input>
           </el-form-item>
           <el-form-item label="B选项">
             <el-input v-model="TwoForm.B"></el-input>
           </el-form-item>
           <el-form-item label="C选项">
             <el-input v-model="TwoForm.C"></el-input>
           </el-form-item>
           <el-form-item label="D选项">
             <el-input v-model="TwoForm.D"></el-input>
           </el-form-item>
           <el-form-item label="分数">
             <el-input v-model="TwoForm.time"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_TC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
      <div class="questions" v-if="three">
        <el-form ref="form" :model="ThreeForm" label-width="80px">
           <el-form-item label="填空题目">
             <el-input v-model="ThreeForm.th_name"></el-input>
           </el-form-item>
           <el-form-item label="分数">
             <el-input v-model="ThreeForm.score"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_TC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
      <div class="questions" v-if="four">
        <el-form ref="form" :model="FourForm" label-width="80px">
           <el-form-item label="简答题目">
             <el-input v-model="FourForm.f_name"></el-input>
           </el-form-item>
           <el-form-item label="分数">
             <el-input v-model="FourForm.score"></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="onSubmit">立即创建</el-button>
             <el-button @click="close_TC()">取消</el-button>
           </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="cc_form3" v-if="showP">
         <el-table
          :data="nowData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="s_name"
            label="考生姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="leave_count"
            label="离开次数"
            width="180">
          </el-table-column>
          <el-table-column
            prop="leave_time"
            label="离开总时间"
            width="180">
          </el-table-column>
         </el-table>
          <el-button @click="cancelP()">关闭</el-button>
    </div>
    <div class="cc_form4" v-if="showFin">
         <el-table
          :data="finshData"
          style="width: 100%"
          max-height="250"
          border
          >
          <el-table-column
            fixed
            prop="s_name"
            label="考生姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="s_score"
            label="分数"
            width="150">
          </el-table-column>
         <el-table-column
            fixed="right"
            label="操作"
            width="150">
              <el-button
                type="text"
                size="small">
                批改试卷
              </el-button>
          </el-table-column>
         </el-table>
          <el-button @click="cancelFin()">关闭</el-button>
    </div>
   </div>
</template>

<script>
export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      onSubmit() {
        console.log('submit!');
      },
      showF(){
        this.showForm = true
      },
      cancelF(){
        this.showForm = false
      },
      //添加题目
      showTest(){
        this.showTC = true
      },
      close_TC(){
        this.showTC = false
      },
      showPerson(){
        this.showP = true
      },
      cancelP(){
        this.showP = false
      },
      showFinsh(){
        this.showFin = true
      },
      cancelFin(){
        this.showFin = false
      },
      showone(){
        this.one = true
        this.two = false
        this.three = false
        this.four = false
      },
      showtwo(){
        this.one = false
        this.two = true
        this.three = false
        this.four = false
      },
      showthree(){
        this.one = false
        this.two = false
        this.three = true
        this.four = false
      },
      showfour(){
        this.one = false
        this.two = false
        this.three = false
        this.four = true
      },
    },
    data() {
      return {
        tableData: [{
          T_id: '12',
          course_name: 'Java',
          teacher_name: '王虎',
          finsh_time: '2023年4月26日',
          time: '3小时',
          n_person:1,
          f_person:12
        }, {
          T_id: '10',
          course_name: 'C++',
          teacher_name: '李四',
          finsh_time: '2023年4月26日',
          time: '2小时',
          n_person:1,
          f_person:12
        },],
        nowData:[{
         s_name:'王五',
         leave_count:2,
         leave_time:'12s'
        }],
        finshData:[{
         s_name:'王五',
         s_score:95,
        }],
        form: {
          T_id:'',
          course_name: '',
          teacher:'',
          finsh_time:'',
          time:'',
          n_person:'',
          f_person:'',
        },
        //单选题目
        OneForm:{
          o_name:'',
          A:'',
          B:'',
          C:'',
          D:'',
          score:''
        },
        //多选题目
        TwoForm:{
          t_name:'',
          A:'',
          B:'',
          C:'',
          D:'',
          score:''
        },
        //填空题目:
        ThreeForm:{
          th_name:'',
          score:''
        },
        //简答题目
        FourForm:{
          f_name:'',
          score:''
        },
        showForm : false,
        showTC:false,
        showP:false,
        showFin:false,
        one:false,
        two:false,
        three:false,
        four:false
      }
    },

}
</script>

<style lang="scss" scoped>
  .cc_box{
    width: 100%;
    min-height: 500px;
    background-color: #f6f6f4;
    position: relative;
    .cc_update{
       position: relative;
       width: 100%;
       height: 80px;
       .cc_btn1{
        position: absolute;
        top: 10px;
        right: 20px;
       } 
    }
    .table{
       padding:10px;
    }
    .cc_form{
       position: absolute; 
       width: 50%;
       min-height: 350px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
    }
    .cc_form2{
       position: absolute; 
       width: 50%;
       min-height: 400px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
       .btn1{
        position: absolute;
        bottom: 10px;
        left: 35%;
       }
       .btn2{
        position: absolute;
        bottom: 10px;
        left: 50%;
       }
       .buttons{
         margin-bottom: 10px;
       }
    }
    .cc_form3{
       position: absolute; 
       width: 50%;
       min-height: 400px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
       .btn1{
        position: absolute;
        bottom: 10px;
        left: 35%;
       }
       .btn2{
        position: absolute;
        bottom: 10px;
        left: 50%;
       }
       .buttons{
         margin-bottom: 10px;
       }
    }
    .cc_form4{
       position: absolute; 
       width: 50%;
       min-height: 400px;
       padding: 40px;
       box-sizing: border-box;
       background-color: white;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       z-index: 100;
       border-radius: 10px;
       .btn1{
        position: absolute;
        bottom: 10px;
        left: 35%;
       }
       .btn2{
        position: absolute;
        bottom: 10px;
        left: 50%;
       }
       .buttons{
         margin-bottom: 10px;
       }
    }
  }
</style>